<template>
  <div class="koi-flex">
    <KoiCard>

      <!-- 表格头部按钮 -->
      <el-row :gutter="10">
        <el-col :span="1.5" v-auth="['system:role:delete']">
          <el-button type="danger" icon="delete" plain @click="handleBatchDelete()">清空操作日志</el-button>
        </el-col>
        <KoiToolbar :showSearchV2="false" @refreshTable="handleListPage"></KoiToolbar>
      </el-row>

      <br />
      <!-- 数据表格 -->
      <el-table v-loading="loading" border :data="tableList" empty-text="暂时没有数据哟🌻">

        <el-table-column label="操作人员[登录名/用户名]" prop="user" align="center" :show-overflow-tooltip="true"
          width="220px"></el-table-column>

        <el-table-column label="操作时间" prop="time" align="center" :show-overflow-tooltip="true"
          width="220px"></el-table-column>

        <el-table-column label="操作IP" prop="location" align="center" :show-overflow-tooltip="true"
          width="440px"></el-table-column>

        <el-table-column label="操作描述" align="center" :show-overflow-tooltip="true">

          <template #default="scope">
            <KoiTag :tagOptions="describeTypeOptions" :value="scope.row.type" :label="scope.row.describe"></KoiTag>
          </template>

        </el-table-column>
      </el-table>

      <br />

      <!-- 分页 -->
      <el-pagination background v-model:current-page="searchParams.page" v-model:page-size="searchParams.pageSize"
        v-show="total > 0" :page-sizes="[10, 20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleListPage" @current-change="handleListPage" />

    </KoiCard>
  </div>
</template>

<script setup lang="ts" name="operlogPage">
import { ref, onMounted } from "vue";
// @ts-ignore
import { koiNoticeSuccess, koiNoticeError, koiMsgWarning, koiMsgBox, koiMsgInfo, koiMsgError } from "@/utils/koi.ts";
// @ts-ignore
import { koiDatePicker } from "@/utils/index.ts";
// @ts-ignore
import { clearOperInfo, getOperInfo } from "@/api/system/operlog/index.ts";

// 数据表格加载页面动画
const loading = ref(false);
// 数据表格数据
const tableList = ref<any>([]);

// 查询参数
const searchParams = ref({
  page: 1, // 第几页
  pageSize: 10, // 每页显示多少条
});
const total = ref<number>(0);

const describeTypeOptions = ref([
  {
    dictLabel: "",
    dictValue: "0",
    dictTag: "danger",
    dictColor: ""
  },
  {
    dictLabel: "",
    dictValue: "1",
    dictTag: "success",
    dictColor: ""
  },
  {
    dictLabel: "",
    dictValue: "2",
    dictTag: "warning",
    dictColor: ""
  },
  {
    dictLabel: "",
    dictValue: "3",
    dictTag: "info",
    dictColor: ""
  },
])

/** 数据表格 */
const handleListPage = async () => {
  try {
    loading.value = true;
    tableList.value = []; // 重置表格数据
    const res: any = await getOperInfo(searchParams.value);
    tableList.value = res.data;
    total.value = res.count;
  } catch (error) {
    console.log(error);
    koiNoticeError("数据查询失败，请刷新重试🌻");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  // 获取数据表格数据
  handleListPage();
});

const handleBatchDelete = () => {
  // 弹窗确认
  koiMsgBox("您确定进行清空操作日志么？", "温馨提示：", "确定", "取消", "warning")
    .then(() => {
      clearOperInfo().then(() => {
        koiNoticeSuccess("清空操作日志成功！");
        handleListPage();
      }).catch(() => {
        koiNoticeError("清空操作日志失败！");
      });
    }).catch(() => {
      koiMsgWarning("已取消");
    });
}
</script>

<style lang="scss" scoped></style>
